<template>
  <div class="recommend">
    <div class="brand">
      <a href="#" class="brandHear">
        <div class="imgs">
          <img
            src="//a.vpimg3.com/upload/brandcool/0/LOGO/10003960/a3d494db330b438ca98fd53b42d8f81a/primary.png"
            alt=""
          />
        </div>
        <div class="brandRight">
          <b>回力</b>
          <p>回力品牌坚持明确'大众化'xxxxxxxx</p>
        </div>
      </a>
      <a href="#" class="btn"> <p>查看品牌</p> </a>
    </div>
    <div class="hotSale">
      <p class="hotP">热销好货</p>
      <div class="hotSaleCount">
        <a href="#" class="hotBox">
          <img
            src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634318/2022/0616/72/7bc157d3-3f71-433d-9527-efde6d82dce2_420_531.jpg"
            alt=""
          />
          <p>男鞋夏季透气2022新款网面运动鞋潮流跑步老爹鞋休闲阿甘鞋男</p>
          <span>¥109</span>
        </a>
      </div>
      <div class="hotSaleCount">
        <a href="#" class="hotBox">
          <img
            src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634318/2022/0616/72/7bc157d3-3f71-433d-9527-efde6d82dce2_420_531.jpg"
            alt=""
          />
          <p>男鞋夏季透气2022新款网面运动鞋潮流跑步老爹鞋休闲阿甘鞋男</p>
          <span>¥109</span>
        </a>
      </div>
      <div class="hotSaleCount">
        <a href="#" class="hotBox">
          <img
            src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634318/2022/0616/72/7bc157d3-3f71-433d-9527-efde6d82dce2_420_531.jpg"
            alt=""
          />
          <p>男鞋夏季透气2022新款网面运动鞋潮流跑步老爹鞋休闲阿甘鞋男</p>
          <span>¥109</span>
        </a>
      </div>
    </div>
    <div class="hotSale">
      <p>看了又看</p>
      <div class="hotSaleCount">
        <a href="#" class="hotBox">
          <img
            src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634318/2022/0616/72/7bc157d3-3f71-433d-9527-efde6d82dce2_420_531.jpg"
            alt=""
          />
          <p>男鞋夏季透气2022新款网面运动鞋潮流跑步老爹鞋休闲阿甘鞋男</p>
          <span>¥109</span>
        </a>
      </div>
      <div class="hotSaleCount">
        <a href="#" class="hotBox">
          <img
            src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634318/2022/0616/72/7bc157d3-3f71-433d-9527-efde6d82dce2_420_531.jpg"
            alt=""
          />
          <p>男鞋夏季透气2022新款网面运动鞋潮流跑步老爹鞋休闲阿甘鞋男</p>
          <span>¥109</span>
        </a>
      </div>
      <div class="hotSaleCount">
        <a href="#" class="hotBox">
          <img
            src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/634318/2022/0616/72/7bc157d3-3f71-433d-9527-efde6d82dce2_420_531.jpg"
            alt=""
          />
          <p>男鞋夏季透气2022新款网面运动鞋潮流跑步老爹鞋休闲阿甘鞋男</p>
          <span>¥109</span>
        </a>
      </div>
    </div>
    <div class="lookAndLook"></div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Recommend",
}
</script>

<style lang="less" scoped>
.recommend {
  width: 180px;
  // border: 1px solid red;
  .brand {
    width: 100%;
    height: 140px;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    .brandHear {
      display: block;
      width: 100%;
      height: 65px;
      // border: 1px solid blue;
      text-decoration: none;
      color: #999;
      .imgs {
        display: inline-block;
        width: 64px;
        height: 64px;
        float: left;
        border: 1px solid #ccc;
        img {
          width: 64px;
          margin: 15.5px 0;
        }
      }
      .brandRight {
        text-align: left;
        padding-left: 72px;
        b {
          font-weight: 600;
        }
        p {
          margin-top: 5px;
          height: 30px;
          overflow: hidden;
        }
      }
    }
    .btn {
      display: block;
      text-decoration: none;
      color: #f10180;
      float: none;
      width: 100%;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border: 1px solid #f10180;
      border-radius: 5px;
      background-color: #fcedf2;
      margin-top: 15px;
      p {
        margin: 0px;
      }
    }
  }
  .hotSale {
    border: 1px solid #ccc;
    margin-top: 25px;
    .hotP {
      text-align: center;
      font-size: 16px;
      margin: 5px 0;
      color: #999;
    }
    .hotBox {
      display: block;
      width: 100%;
      padding: 5px;
      // border: 1px solid black;
      box-sizing: border-box;
      text-align: left;
      text-decoration: none;

      img {
        width: 100%;
      }
      p {
        height: 18px;
        font-size: 12px;
        color: #ccc;
        overflow: hidden;
        margin: 0;
      }
      span {
        color: #f10180;
      }
    }
  }
}
</style>
